<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/inputnumber.css" />
  <title>购物车</title>
</head>

<body>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">

          <!-- 渲染需要的行 -->
          <!-- 
            <div class="tr">
            <div class="td"><input type="checkbox" checked /></div>
            <div class="td"><img src="http://autumnfish.cn/static/火龙果.png" alt="" /></div>
            <div class="td">6</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease"> - </button>
                <span class="my-input">2</span>
                <button class="increase"> + </button>
              </div>
            </div>
            <div class="td">12</div>
            <div class="td"><button class="del">删除</button></div>
          </div> 
        -->

        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">24</span></span>
          <!-- 结算按钮 -->
          <button class="button pay">结算( 6 )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div class="empty" style="display: none;">🛒空空如也</div>
  </div>
  <script src="data/data.json"></script>
  <script>
      // console.log(dataArr);
      // dataArr = []
      let  tbody = document.querySelector(".tbody")
      let  checkAll = document.querySelector(".check-all input")

      
    // 1. 渲染业务
    function render() {
      
      const strArr = dataArr.map((item,index)=>{
        let {isChecked,num,price,id,icon} = item
        // console.log(icon);
        
        return `
          <div class="tr" data-id="${index}">
            <div class="td"><input type="checkbox"  ${isChecked ? 'checked' :'' }   /></div>
            <div class="td"><img src="${icon}" alt="" /></div>
            <div class="td">${price}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease"> - </button>
                <span class="my-input">${num}</span>
                <button class="increase"> + </button>
              </div>
            </div>
            <div class="td">${price*num}</div>
            <div class="td"><button class="button del">删除</button></div>
          </div> 
        
        `

      })

      // console.log(strArr);

      tbody.innerHTML = strArr.join("")

      // 全选按钮
      // checkAll.checked = dataArr.every(ele => ele.isChecked === true)

      // 初始化一个标志变量，用于判断是否所有元素都被选中
      let allChecked = true;
        // 遍历数据数组
        for (let i = 0; i < dataArr.length; i++) {
            if (!dataArr[i].isChecked) {
                // 如果有任何元素未被选中，则将标志变量设置为 false
                allChecked = false;
                // 一旦发现有未选中的元素，就可以提前结束循环
                break;
            }
        }
        // 根据标志变量设置全选按钮的状态
        checkAll.checked = allChecked;


      // 总价模块 只选择勾选的商品
      let newArr = dataArr.filter(item=>{
        return  item.isChecked === true
      })
      // console.log(newArr);

      // 总商品  总价格  
      let  totalPrice = newArr.reduce((prev,item)=>{
        // console.log(prev);
        // console.log(item);
        return prev+=item.num * item.price
      },0)

      // console.log(totalPrice);
      document.querySelector(".price").innerHTML = totalPrice.toFixed(2)
      // 总商品数量 
      let  totalNum = newArr.reduce((prev,item)=>{
        // console.log(prev);
        // console.log(item);
        return prev+=item.num 
      },0)
      // console.log(totalNum);
      document.querySelector(".pay").innerHTML = `结算(${totalNum})`
      // 购物车是否显示
      let empty = document.querySelector(".empty")
      empty.style.display = dataArr.length == 0 ? "block" : "none"


    }

    // 渲染模块
    render()
 
    // 2. 事件委托
    tbody.addEventListener("click",function (e) {
        // console.log(e.target.parentNode.parentNode.dataset.id);
        let id = e.target.parentNode.parentNode.dataset.id;
        // console.log(id);
        
        // 删除业务
        if (e.target.className === 'button del') {
          dataArr.splice(id, 1)
          //渲染业务
          render()
        }

        // 全选小复选框-》全选选中
        if (e.target.tagName ==="INPUT") {
          // console.log("a");
          dataArr[id].isChecked = e.target.checked;
          //渲染业务
          render()
        }

        // +
        if (e.target.className ==="increase") {
          // console.log("b");
          let id = e.target.parentNode.parentNode.parentNode.dataset.id;
          dataArr[id].num++;
          //渲染业务
          render()
        }

        // -
        if (e.target.className ==="decrease") {
          // console.log("b");
          let id = e.target.parentNode.parentNode.parentNode.dataset.id;
          if (dataArr[id].num<=1) {
            dataArr[id].num = 1;
          } else {
            dataArr[id].num--;
            //渲染业务
            render()
          }
        }


    })

   
     

    // 3. 全选反选点击
    // 3.1 点击全选修改数组所有选中状态为true
    checkAll.addEventListener("click",function () {
        dataArr.forEach((item)=> item.isChecked = this.checked)
        console.log(dataArr);
         //渲染业务
         render()
    })

  </script>
</body>

</html>